<template>
    <div class="main-menu">
        <div class="menu-item"  @click="jump('/home')" >
            <img class="menu-item" :src="homeImg" alt="">
            <span :class="[homeImg===blankImgActive?'menu-active':'']">首页概览</span>
        </div>
        <div class="menu-item"  @click="jump('/monitor')">
            <img class="menu-item"  :src="monitorImg" alt="">
            <span :class="[monitorImg===blankImgActive?'menu-active':'']">实时监控</span>
        </div>
        <div class="menu-item"  @click="jump('/module')" >
            <img class="menu-item" :src="moduleImg" alt="">
            <span :class="[moduleImg===blankImgActive?'menu-active':'']">定量灌溉</span>
        </div>
        <div class="menu-item"  @click="jump('/control')" >
            <img class="menu-item-img":src="controlImg" alt="">
            <span :class="[controlImg===blankImgActive?'menu-active':'']">模糊灌溉</span>
        </div>
    </div>
</template>

<script>
    import blankImg from "../assets/menu-blank.png"
    import blankImgActive from "../assets/menu-blank-active.png"

    export default {
        name: "Menu",
        data(){
          return{
              blankImgActive:blankImgActive,
              homeImg:blankImg,
              monitorImg:blankImg,
              moduleImg:blankImg,
              controlImg:blankImg
          }
        },
        methods:{
            jump(path){
                if(path === this.$route.path) return
                this.$router.push(path)
            }
        },
        mounted() {
            if(this.$route.path==='/home'){
                this.homeImg = blankImgActive
            }
            if(this.$route.path==='/monitor'){
                this.monitorImg = blankImgActive
            }
            if(this.$route.path==='/module'){
                this.moduleImg = blankImgActive
            }
            if(this.$route.path==='/control'){
                this.controlImg = blankImgActive
            }

        }
    }
</script>

<style scoped lang="less">
    .main-menu{
        display: flex;
        /*flex-direction: column;*/
    }
    .menu-item{
        margin-bottom: 10px;
        width: 215px;
        height: 55px;
        cursor: pointer;
        position: relative;
        .menu-item-img{
            position: absolute;
            top: 0;
            left: 0;
            width: 215px;
            height: 55px;
        }
        span{
            font-size: 18px;
            color: #E6E6E6;
            position: absolute;
            top: 12px;
            left: 16px;
        }
        .menu-active{
            font-family: MicrosoftYaHei-Bold;
            font-size: 18px;
            color: #F8ECEC;
            text-shadow: 0 0 8px #F8733B;
        }
    }

</style>
